<template>
  <div>
    <!-- 头部搜索 -->
    <header>
      <input type="text" v-model="input" @keyup.13="search" />
      <button @click="search">搜索</button>
    </header>
    <!-- 下拉选择 -->
    <div>
      <select v-model="selected">
        <option v-if="selects.length === 0">没有数据</option>
        <option :value="item" v-for="(item, index) in selects" :key="index">
          {{ item }}
        </option>
      </select>
    </div>

    <!-- 正在运行 -->
    <ul>
      <li>正在运行中：共{{ runing.length }}条</li>
      <li
        @click="change(index, runing, overing)"
        v-for="(item, index) in runing"
        :key="index"
      >
        {{ index + 1 }},{{ item }}
      </li>
    </ul>
    <!-- 已经完成 -->
    <ul>
      <li>已经完成的：共{{ overing.length }}条</li>
      <li
        @click="change(index, overing, runing)"
        v-for="(item, index) in overing"
        :key="index"
      >
        {{ index + 1 }},{{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
//跨域百度请求
import jsonp from "jsonp";
const usr = "http://suggestion.baidu.com/su?wd=";
export default {
  methods: {
    change(index, a, b) {
      //   console.log(index, a, b);
      const item = a.splice(index, 1);
      b.push(item[0]);
    },
    search() {
      //   console.log(this.input);
      jsonp(`${usr}${this.input}`, { param: "cb" }, (err, data) => {
        if (err) {
          alert("接口请求出错");
        } else {
          // console.log(data)
          this.selects = data.s;
        }
      });
    },
  },
  data() {
    return {
      selected: "",
      input: "", //输入搜索
      selects: [], //下拉选择数据
      runing: [], //正在进行中
      overing: [], //已完成
    };
  },
  watch: {
    slected(val) {
      //val新值不能为空，不可以没有数据
      if (val && val !== "没有数据") {
        this.runing.push(val);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>